<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            border: solid 1px #ccc;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>⭐</td><td>⭐</td><td>⭐</td><td>⭐</td><td>⭐</td>
        </tr>
    </table>
    <button id="score"> 打分</button>
    <br><span id="tip"></span>
    <script>
        var tds = document.querySelectorAll("table tr td");
        var score = document.getElementById("score");
        var tip = document.getElementById("tip");
        for(var i=0;i<tds.length;i++){
            tds[i].onmouseover = test;
        }
        index=-1;
        function test(){
            //判断鼠标移入的节点，与当前所在下标的节点是否一致
            for(var i=0;i<tds.length;i++){
                if(tds[i]==this){
                    index = i;
                    console.log("index",index)
                }
            }
            //获取星星小标为index ,将0-index都变色
            for(var i=0;i<index+1;i++){
                tds[i].style.background = "red"
            }
            for(var i=index+1;i<tds.length;i++){
                tds[i].style.background = "black"
            }
        }
        
        score.onclick = function(){
            tip.innerHTML=`${index+1}分`
        }
        
    </script>
</body>
</html>